<template>
  <div class="login">
    <el-form ref="loginRef" :inline="true" :model="loginForm" :rules="loginRules" class="login-form">
      <h3 class="title">帮助中心</h3>
      <p style="font-size: 14px;color: #707070;margin: 10px 0;margin-bottom: 20px;">*您的访问地址有误，请联系<span
          style="color: #409eff;">{{ptName}}</span>获取您的访问地址和账号信息，您也可以自助找回</p>
      <el-form-item prop="username">
        <el-input v-model="loginForm.tenantLinkName" type="text" size="large" auto-complete="off" placeholder="联系人名称">
          <template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input v-model="loginForm.tenantLinkMobile" size="large" auto-complete="off" placeholder="联系人电话" @keyup.enter="handleLogin">
          <template #prefix><svg-icon icon-class="phone" class="el-input__icon input-icon" /></template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button :loading="loading" size="large" type="primary" style="width:100%;" @click.prevent="handleLogin">
          <span v-if="!loading">查 询 租 户 信 息</span>
          <span v-else>查 询 中...</span>
        </el-button>
      </el-form-item>

      <div v-if="urlList.length">
        <el-table :data="urlList" style="width: 100%;height: 280px;">
          <el-table-column prop="date" label="序号" width="100">
            <template #default="scope">
              <span>{{ scope.$index+1 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="logo" width="100">
            <template #default="scope">
              <el-avatar :size="50" :src="scope.row.tenantLogo" v-if="scope.row.tenantLogo" />
            </template>
          </el-table-column>
          <el-table-column prop="tenantName" label="租户名称" width="200" />
          <el-table-column prop="tenantName" label="访问地址">
            <template #default="scope">
              <p style="font-size: 14px;color: #707070;"><a style="color: #409eff;" target="_blank" :href="scope.row.tenantUrl">{{scope.row.tenantUrl}}</a></p>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-form>
    <!--  底部  -->
  </div>
</template>

<script setup>
  import { getCodeImg, loginQueryLink } from "@/api/login";
  import Cookies from "js-cookie";
  import { encrypt, decrypt } from "@/utils/jsencrypt";
  import useUserStore from '@/store/modules/user'
  import { linkUser } from '@/api/system/config'
  const userStore = useUserStore()
  const route = useRoute();
  const router = useRouter();
  const { proxy } = getCurrentInstance();
  const urlList = ref([])
  const loginForm = ref({
    tenantLinkName: "",
    tenantLinkMobile: "",
  });

  const loginRules = {
    tenantLinkName: [{ required: true, trigger: "blur", message: "请输入您的账号" }],
    tenantLinkMobile: [{ required: true, trigger: "blur", message: "请输入您的密码" }],
  };
  const ptName = ref('')
  const codeUrl = ref("");
  const loading = ref(false);
  // 验证码开关
  const captchaEnabled = ref(true);
  // 注册开关
  const register = ref(false);
  const redirect = ref(undefined);

  watch(route, (newRoute) => {
    redirect.value = newRoute.query && newRoute.query.redirect;
  }, { immediate: true });

  function getPtName() {
    linkUser().then((res) => {
      ptName.value = res.data
    })
  }

  function handleLogin() {
    proxy.$refs.loginRef.validate(valid => {
      if (valid) {
        loading.value = true;
        // 调用action的登录方法
        loginQueryLink(loginForm.value).then((res) => {
          loading.value = false
          urlList.value = res.data;
          !res.data.length ? proxy.$modal.msgWarning("输入信息无效，请联系系统管理员!") : ''
        }).catch(() => {
          loading.value = false;

        });
      }
    });
  }
  getPtName()
</script>

<style lang='scss' scoped>
  .login {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-image: url("../assets/images/background.jpg");
    background-size: cover;
  }

  .title {
    margin: 0px auto 30px auto;
    text-align: center;
    color: #707070;
  }

  .login-form {
    border-radius: 6px;
    background: #ffffff;
    width: 750px;
    padding: 25px 25px 5px 25px;

    .el-input {
      height: 40px;

      input {
        height: 40px;
      }
    }

    .input-icon {
      height: 39px;
      width: 14px;
      margin-left: 0px;
    }
  }

  .login-tip {
    font-size: 13px;
    text-align: center;
    color: #bfbfbf;
  }

  .login-code {
    width: 33%;
    height: 40px;
    float: right;

    img {
      cursor: pointer;
      vertical-align: middle;
    }
  }

  .el-login-footer {
    height: 40px;
    line-height: 40px;
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    color: #fff;
    font-family: Arial;
    font-size: 12px;
    letter-spacing: 1px;
  }

  .login-code-img {
    height: 40px;
    padding-left: 12px;
  }
</style>